<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
	<head>
		<title>Pagina Riassunti - MyBudget</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/syntesysStyle.css" />
		<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.blockUI.js"></script>
		<script type="text/javascript" src="js/XMLWriter-1.0.0-min.js"></script>
		<script type="text/javascript" src="js/jquery.popupWindow.js"></script>
		<script type="text/javascript" src="js/syntesisUIAnimator.js" defer="defer"></script>
	</head>

	<body>
		
		<header id="header" >
			<a href="/"><img src="img/logo.png" alt="MyBudget_logo"/></a>
			<nav id="loginInformation">
				<ul>
					<li>
						Hai effettuato l'accesso come ${username} 
					</li>
					<li>
						<a href="help.html" class="popUp">Aiuto</a>
					</li>
					<li>
						<a href="${logoutURL}">Disconnetti</a>
					</li>
				</ul>
			</nav>
			<nav id="tab">
				<ul>
					<li>
						<a href="statementPage">Movimenti</a>
					</li>
					<li class="active">
						<a href="synthesisPage">Riassunti</a>
					</li>
					
				</ul>
			</nav>
		</header>
		<section id="filterStatement">
			<form method="post" onsubmit="return false;" id="filterStatementForm" autocomplete="off">
				<ul>
					<li>
						<input type="date" id="startDate" name="stopDate" class="itemDate" required="required" onchange="onStartDateChange(this);" title="Il seguente campo deve essere valorizzato con una data precedente a quella di fine ricerca." />
					</li>
					<li>
						<input type="date" id="stopDate" name="stopDate" class="itemDate" required="required" onchange="onStopDateChange(this);" title="Il seguente campo deve essere valorizzato con una data successiva a quella di inizio ricerca.">
					</li>
					<li>
						<select id="itemName" name="itemName" class="itemName" >
							<option value="">Tutti</option>
							<c:forEach var="itemName" items="${itemNameList}">
								<option value="${itemName}">${itemName}</option>
							</c:forEach>
						</select>
					</li>
					<li>
						<input type="text" id="description" name="description" class="itemDescription" placeholder="Descrizione" />
					</li>
					<li>
						<button onclick="submitSearch(this);">
							<img src="img/funnelIcon.png" alt="funnelIcon" />
							<span class="buttonTXT">Filtra</span>
						</button>
					</li>
				</ul>
			</form>
		</section>
		<section id="balance">
			<h3>Il saldo totale per il filtro selezionato è di: <span class="money">---- </span> </h3>
		</section>

		<section id="statement">
			<header id="statementHeader">
				<div class="itemDate">Data</div>
				<div class="itemPrice">Importo</div>
				<div class="itemName">Capitolo</div>
				<div class="itemDescription">Descrizione</div>
				
			</header>
			<section id="balanceList">
				<!-- Filled by Ajax -->
			</section>
				
			
		</section>
		<footer>
			<p>Copyright &copy; 2012 Tiziano Ceccarini</p>
		</footer>
	</body>
</html>